<template>
  <div>
    <el-form :rules="rules" ref="form" label-width="100px" style="width: 600px" :model="form">
      <el-form-item label="选择头像" prop="coach_avatar">
        <el-upload
          class="avatar-uploader"
          name="sbb"
          :action="`${UPLOADURL}/upload`"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img
            v-if="form.coach_avatar"
            :src="form.coach_avatar"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="教练名称" prop="coach_name">
        <el-input v-model="form.coach_name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="教练类型" prop="fitness_type">
        <el-select
          multiple
          v-model="form.fitness_type"
          placeholder="请选择类型"
        >
          <el-option
            v-for="item in types"
            :key="item.ft_id"
            :label="item.type"
            :value="item.type"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="教练电话" prop="phone">
        <el-input v-model="form.phone" autocomplete="off"></el-input>
      </el-form-item> -->

      <el-form-item>
        <el-button @click="submit" type="primary">立即修改</el-button>
        <el-button @click="$router.push(`/home/coach-list/${form.trends_id}`)">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import httpApi from "@/http";
export default {
  data() {
    return {
      types: [], // 存储教练类型列表
      form: {
        coach_id: this.$route.query.coach_id,
        coach_name: "",
        // phone: "",
        fitness_type: "",
        coach_avatar: "",
        trends_id:""
      },
      rules:{
        coach_avatar:[
        {required:true, message:'必填', trigger:'blur'}
        ],
        coach_name:[
        {required:true, message:'必填', trigger:'blur'}
        ],
        fitness_type:[
        {required:true, message:'必填', trigger:'blur'}
        ],
        // phone:[
        // {required:true, message:'必填', trigger:'blur'}
        // ]
      }
    };
  },
  mounted() {
    this.queryCoachInfo();

    this.queryCoachType()
  },
  methods: {
    /** 查询教练类型 */
    queryCoachType(){
      httpApi.coachApi.queryAllTypes().then((res)=>{
       console.log('教练类型：',res);
       this.types = res.data.data
      })
    },

    /** 根据教练id查询到教练信息 */
    queryCoachInfo() {
      let coach_id = this.form.coach_id;
      // console.log('教练滴id:',coach_id);
      httpApi.coachApi.queryById({ coach_id }).then((res) => {
        console.log("教练具体信息：", res);
        this.form = res.data.data;
        this.form.fitness_type = res.data.data.fitness_type.split(",");
        this.form.coach_avatar = 'http://176.221.16.8:8080'+res.data.data.coach_avatar
      });
    },

    /** 提交修改教练信息的表单 */
    submit(){
      this.$refs.form.validate(valid=>{
        if(valid){
         // 处理请求参数中的特殊字段 
         this.form.fitness_type = this.form.fitness_type.join(',')
          // 发送更新教练信息的请求
          httpApi.coachApi.update(this.form).then(res=>{
            console.log('修改教练结果', res)
            if(res.data.code==200){  // 新增成功
              this.$message({type:'success', message:'成功'})
              this.$router.push(`/home/coach-list/${this.form.trends_id}`)
            }else {
              this.$message({type:'error', message:'系统异常'})
            }
          })
        }
      })
    },


    /**上传成功后执行 */
    handleAvatarSuccess(res, file) {
      console.log(res);
      // 将上传成功的图片访问路径赋值传给form对象的属性
      this.form.coach_avatar = res.pic;
    },

    /**图片上传之前执行 */
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  height: 178px;
  display: block;
}
</style>
